require(['/js/config.js'], () => {
    require(['template', 'header', 'footer', 'jq_cookie'], (template) => {
        class Shopping {
            constructor() {
                this.setStorage()
                this.readStorage()
                this.ischecked()
                this.totalcheck()
                this.moreorless()
                this.deleteshop()
                this.deleteall()
            }
            setStorage() { //根据用户名存储购物车信息,在购物车页登陆，自动刷新
                $('header').on('click', '#logoff', () => {
                    window.location.href = '/index.html'
                    alert('非法注销，点击跳转首页')
                }) //再次页面注销会跳转首页
                $('')
            }
            readStorage() { //读取购物车信息
                this.resp = JSON.parse(localStorage.getItem($.cookie('ison')))
                $('#tbody_shop').html(template('script_shop', {
                    resp: this.resp
                })) //写入数据
                this.allornot() //判断全选框是否勾选
                $('#num').html(this.sumprice()[0])
                $('#sum').html('￥' + this.sumprice()[1])
            }
            ischecked() { //处理选中状态的购物车数据，local增加表示选中的状态
                var _this = this
                $("#tbody_shop").on('click', '.td_input', function () {
                    if (this.checked) { //若果被选中，增加选中状态
                        _this.resp.forEach((i) => {
                            if (i.id == this.parentNode.parentNode.getAttribute('index')) {
                                i.ischecked = true //改变localstroage选中状态
                            }
                        })
                    } else {
                        _this.resp.forEach((i) => {
                            if (i.id == this.parentNode.parentNode.getAttribute('index')) {
                                i.ischecked = false //改变选中状态为未选择
                            }
                        })
                    }
                    _this.allornot() //判断全选框是否勾选
                    _this.returnlocal(_this.resp) //回写并计算
                })
            }
            totalcheck() { //全选按钮的勾选与取消
                $('#totalchecked').on('click', () => {
                    var arr = Array.from(document.querySelectorAll('#tbody_shop input'))
                    if (document.querySelector('#totalchecked').checked) {
                        arr.forEach((i) => {
                            i.checked = true
                        }) //全部勾选
                        this.resp.forEach((i) => {
                            i.ischecked = true
                        }) //修改loaclstorage
                        this.returnlocal(this.resp) //回写并计算
                    } else {
                        arr.forEach((i) => {
                            i.checked = false
                        }) //全部取消
                        this.resp.forEach((i) => {
                            i.ischecked = false
                        }) //修改loaclstorage
                        this.returnlocal(this.resp) //回写并计算
                    }
                })
            }
            sumprice() { //计算价格和数量
                let num = 0,
                    sum = 0;
                this.resp.forEach((i) => {
                    if (i.ischecked) {
                        num += i.num
                    }
                })
                this.resp.forEach((i) => {
                    if (i.ischecked) {
                        sum += i.num * i.price
                    }
                })
                return ([num, sum])
            }
            allornot() { //判断是否全选，加载和点击时都要调用
                var arrAll = Array.from(document.querySelectorAll('#tbody_shop input'))
                if (arrAll.every((i) => { //判断是否全选，全选则将全选按钮勾上
                        return i.checked
                    })) {
                    document.querySelector('#totalchecked').checked = true
                } else {
                    document.querySelector('#totalchecked').checked = false
                }
            }
            moreorless() { //数量增加减少
                var _this = this
                $('#tbody_shop').on('click', '.less_num', function () { //减少
                    console.log(_this.resp)
                    _this.resp.forEach((i) => {
                        if (i.id == this.parentNode.parentNode.getAttribute('index')) { //减少同id的数量
                            if (this.nextElementSibling.innerHTML > 1) {
                                i.num--
                                var shopnum = Number(this.nextElementSibling.innerHTML)
                                shopnum--
                                this.nextElementSibling.innerHTML = shopnum
                                this.parentNode.nextElementSibling.innerHTML = shopnum*i.price
                            }
                            _this.returnlocal(_this.resp)
                        }

                    })
                })
                $('#tbody_shop').on('click', '.more_num', function () { //增加
                    _this.resp.forEach((i) => {
                        if (i.id == this.parentNode.parentNode.getAttribute('index')) { //减少同id的数量
                            i.num++
                            var shopnum = Number(this.previousElementSibling.innerHTML)
                            shopnum++
                            this.previousElementSibling.innerHTML = shopnum
                            this.parentNode.nextElementSibling.innerHTML = shopnum*i.price
                            _this.returnlocal(_this.resp)
                        }
                    })
                })
            }
            returnlocal(n) { //回写loaclstorage，并计算,更新头部购物车
                $('#num').html(this.sumprice()[0])
                $('#sum').html('￥' + this.sumprice()[1])
                localStorage.setItem($.cookie('ison'), JSON.stringify(n)) //回写到localStroage中
                //头部购物车数量
                var shop = document.querySelector('#shopnumbers'),  //只能作为绑定事件
                    sum = 0
                var arr = JSON.parse(localStorage.getItem($.cookie('ison')))
                arr.forEach((i) => {
                        sum += i.num
                })
                shop.innerHTML = sum
            }
            deleteshop(){//删除数据
                var _this =this
                $('#tbody_shop').on('click','#deletetd',function(){
                    _this.resp=_this.resp.filter((i) => {//筛选去除同id数据
                        return (i.id != this.parentNode.getAttribute('index')) 
                    })
                    _this.returnlocal(_this.resp)
                    this.parentNode.remove()
                })
            }
            deleteall(){        //全部删除
                var _this =this
                $('#tfootid').on('click',function(){
                    _this.resp=[]
                    _this.returnlocal(_this.resp)
                    document.querySelector('#tbody_shop').remove()
                })
            }
        }
        new Shopping()
    })
})